---
title: إعداد البيئة البرمجية
description: أعِد محررك لبناء المشاريع مع أسترو.
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

خصص محرر الكود الخاص بك لتحسين تجربة التطوير مع أسترو وفتح ميزات جديدة.

## VS Code

[VS Code](https://code.visualstudio.com/) هو محرر شائع لمطوري الويب، من تطوير مايكروسوفت. المحرك الذي بُني عليه يُستخدم لتشغيل بعض محررات المتصفح الشائعة مثل [GitHub Codespaces](https://github.com/features/codespaces) و [Gitpod](https://gitpod.io/).

يعمل أسترو على أي محرر ولكنّا نوصي باستخدام VS Code لمشاريع أسترو. حيث لدينا إضافة رسمية [Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) تفعل العديد من المزايا المهمة، وتحسن تجربة التطوير على مشاريع أسترو.

- تلوين الجمل البرمجية (syntax highlighting) لملفات `.astro`
- دعم أنواع بيانات لغة TypeScript في ملفات `.astro`
- [اقتراحات VS Code](https://code.visualstudio.com/docs/editor/intellisense) لإكمال السطر، والتلميحات وغيرها.

للبدأ، ثبّت [إضافة Astro VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) الآن.

import ReadMore from '~/components/ReadMore.astro';

<ReadMore>اطلع على كيفة [إعداد TypeScript](/ar/guides/typescript/) في مشاريع أسترو.</ReadMore>

## Zed

[Zed](https://zed.dev/) هو محرر أكواد مفتوح المصدر أضاف دعم Astro في إصدار 0.123.2. يمكنك تثبيت [إضافة Astro](https://github.com/zed-industries/zed/tree/main/extensions/astro) في نافذة الإضافات. تحتوي الإضافة علؤ ميزات مثل التلوين, التنسيق, والإكمال التلقائي للجمل البرمجية.

### بيئات تطوير JetBrains

[Webstorm](https://www.jetbrains.com/webstorm/) هو بيئة تطوير متكاملة (IDE) للغة JavaScript و  TypeScript قام بإضافة الدعم لخادم لغة Astro في الإصدار 2024.2. هذا التحديث يحضر معه ميزات مثل التلوين, التنسيق, والإكمال التلقائي للجمل البرمجية.

ثبت الإضافة الرسمية من [JetBrains Marketplace](https://plugins.jetbrains.com/plugin/20959-astro) أو بالبحث عن "Astro" في نافذة الإضافات. يمكنك تغيير خادم اللغة من `Settings | Languages & Frameworks | TypeScript | Astro`.

للمزيد من المعلومات عن دعم Astro في Webstorm, اطلع على [المرجع الرسمي ل Webstorm Astro](https://www.jetbrains.com/help/webstorm/astro.html).

## محررات برمجية أخرى

يقدم مجتمعنا المذهل عدة إضافات للمحررات الشهيرة الأخرى، بما في ذلك:

- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="دعم رسمي" /></span> - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/)
- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim
- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) و [TreeSitter](https://github.com/virchau13/tree-sitter-astro) لـ Neovim <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim
- emacs - راجع تعليمات ل [تكوين Emacs و Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> للعمل مع أسترو
- [أسترو syntax highlighting ل Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text.

## المحررات في المتصفح

بالإضافة للمحررات المثبة على جهازك، أسترو يعمل بشكل جيد على المحررات السحابية (المحررات في المتصفح عمومًا)، ويشمل الدعم:

- [StackBlitz](https://stackblitz.com/) و [CodeSandbox](https://codesandbox.io/) - محررات سحابية تعمل من المتصفح، تدعم تلوين الجمل البرمجية لملفات `.astro` بدون إعداد ولا تحميل!
- [GitHub.dev](https://github.dev/) - يسمح بتثبيت إضافة Astro VS Code [كملحق web](https://code.visualstudio.com/api/extension-guides/web-extensions)، ليوفر بعض مزايا الإضافة، حاليًا يوفر تلوين الجمل البرمجية فقط.
- [Gitpod](https://gitpod.io/) - بيئة تطوير سحابية كاملة يمكنها تثبيت إضافة Astro VS Code الرسمية من OpenVSX.

## أدوات أخرى

### ESLint

[ESLint](https://eslint.org/) أشهر أدوات اكتشاف الأخطاء في الشفرة البرمجية لـ JavaScript و JSX. يمكنك تثبيت [ملحق يدعمه المجتمع](https://github.com/ota-meshi/eslint-plugin-astro) لأسترو أيضًا.

راجع [دليل المستخدم الخاص بهم](https://ota-meshi.github.io/eslint-plugin-astro/user-guide/) لمعرفة المزيد حول تثبيت وإعداد ESLint لمشروعك.

### Stylelint

[Stylelint](https://stylelint.io/) أداة اكتشاف اخطاء شهيرة لـ CSS. [إعدادات خاصة بأسترو مدعومة من المجتمع](https://github.com/ota-meshi/stylelint-config-html). 

يمكن العثور على تعليمات التثبيت والتكامل مع المحررات ومعلومات إضافية في ملف README الخاص بالمشروع.

### Prettier

[Prettier](https://prettier.io/) هو [منسق](https://ar.wikipedia.org/wiki/برتي_برنت) شائع لأكواد JavaScript ،HTML ،CSS وغيرها. إذا كنت تستخدم [إضافة أسترو لـ VS Code](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) أو [إضافة أسترو للمحررات الأخرى](#محررات-برمجية-أخرى)، فستجدها تتضمن تنسيق الكود بـ Prettier.

لدعم تنسيق أكواد أسترو خارج المحرر (في CLI على سبيل المثال) أو على محررات لا ندعمها، فاستخدم [ملحق أسترو الرسمي لـ Prettier](https://github.com/withastro/prettier-plugin-astro).

<Steps>
1. ثبت `prettier` و `prettier-plugin-astro`.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install --save-dev prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add -D prettier prettier-plugin-astro
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add --dev prettier prettier-plugin-astro
      ```
      </Fragment>
    </PackageManagerTabs>

2. أنشئ ملف الإعدادات `.prettierrc.mjs` في المجلد الأساسي للمشروع وأضف له `prettier-plugin-astro`.

    في هذا الملف, يوجد أيضا إعداد يدوي لمحلل ملفات Astro.

    ```js title=".prettierrc.mjs"
    /** @type {import("prettier").Config} */
    export default {
      plugins: ['prettier-plugin-astro'],
      overrides: [
        {
          files: '*.astro',
          options: {
            parser: 'astro',
          },
        },
      ],
    };
    ```

3. قم بتشغيل الأمر `prettier . --write` في الجهاز الطرفي (terminal) لتنسيق ملفاتك.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx prettier . --write
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm exec prettier . --write
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn prettier . --write
      ```
      </Fragment>
    </PackageManagerTabs>
</Steps>

راجع ملف README [لإضافة أسترو على Prettier](https://github.com/withastro/prettier-plugin-astro/blob/main/README.md) لمزيد من المعلومات حول الخيارات المدعومة وكيفية إعداد Prettier داخل VS Code والمزيد.
